<template>
  <div id="addrole_id">
    <el-dialog title="提示" :visible.sync="isShow.flig">
      <el-form
        ref="form"
        :model="sizeForm"
        label-width="80px"
        style=" text-align: left;"
        size="mini"
      >
        <el-form-item label="角色名称" prop="rolename">
          <el-input v-model="sizeForm.rolename"></el-input>
        </el-form-item>

        <el-form-item label="角色权限">
          <el-tree
            :data="menu_list"
            show-checkbox
            node-key="id"
            :default-checked-keys="checked_keys"
            :props="defaultProps"
            ref="tree_ref"
          ></el-tree>
        </el-form-item>
        <el-form-item label="角色状态" prop="status">
          <el-radio-group v-model="sizeForm.status" size="medium">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="close_role">取 消</el-button>
        <el-button type="primary" @click="add_open">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "title"
      },
      sizeForm: {
        id: 0,
        rolename: "",
        status: 1
      },
      checked_keys: []
    };
  },
  props: ["isShow"],
  created() {
    this.MenuActions();
  },
  methods: {
    close_role() {
      this.sizeForm = {
        id: 0,
        rolename: "",
        status: 1
      };
      this.isShow.flig = false;
      this.$refs.tree_ref.setCheckedKeys([]);
    },
    ...mapActions("MenuStore", ["MenuActions"]),
    add_open() {
      var menus = this.$refs.tree_ref.getCheckedKeys().join(",");
      var sendData = { ...this.sizeForm, menus };

      var url = "";
      if (this.sizeForm.id === 0) {
        url = "/roleadd";
      } else {
        url = "/roleedit";
      }
      this.$http.post(url, sendData).then(res => {
        if (res.code == 200) {
          this.$refs.tree_ref.setCheckedKeys([]);
          this.close_role()
          this.$emit("reload_role");
        }
      });
    },
    setForm(obj) {
      this.sizeForm.rolename = obj.rolename;
      this.sizeForm.id = obj.id;
      this.sizeForm.status = obj.status;
      this.checked_keys = obj.menus.split(",");
    }
  },

  computed: {
    ...mapState({ menu_list: state => state.MenuStore.menu_list })
  }
};
</script>

<style>
</style>